<template>
	<view class="content">
		<view class="location" @click="gotoChoose_addr">
				<uni-icons type="location-filled" size="25" color="'#fff'"></uni-icons>
				<text>{{address}}</text>
				<uni-icons type="arrowdown" size="20" color="'#fff'"></uni-icons>
		</view>
		<view class="search">
			<view class="search-content" @click="gotoSearch">
				<uni-icons type="search" size="20"></uni-icons>
				<text>搜索商家名称</text>
			</view>
		</view>
		<view class="food-types">
			<view class="type-items" v-for="(item,index) of foodtypes" :key="index">
				<view>
					<image :src="`../../static/images/index/${index}.jpeg`"></image>
				</view>
				<view :style="{'color':'#666'}">
					{{item}}
				</view>
			</view>
		</view>
		
		<view class="shop-list">
			<view class="list-head">
				<uni-icons type="shop" size="20"></uni-icons>
				<text>附近商家</text>
			</view>
			
			<shopitem v-for="item of restaurants" :key="item.id" :item="item"></shopitem>
		</view>
	</view>
</template>

<script>
	import test from "../../components/test.vue"
	import shopitem from "../../components/shopitem.vue"
	import uniIcons from "../../components/uni-icons/uni-icons.vue"
	import http from '../../api/http.js'
	import location from '@/api/location.js'
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				restaurants: [],
				foodtypes:['甜品饮品','商超便利','美食','简餐','新店特惠','准时达','预定早餐','土豪推荐']
			}
		},
		onLoad() {
			uni.request({
				url: "https://elm.cangdu.org/shopping/restaurants",
				data: {
					latitude:31.22967,
					longitude:121.4762
				},
				success: (res) => {
					this.restaurants = res.data;
				}
			});
			uni.getLocation({
				success:async (res)=> {
					let loc =  res.latitude+','+res.longitude;
					let data = await location.getCur_loc(loc);
					let result = data.result;
					console.log(result);
					this.changeAddress(result.formatted_addresses.recommend);
					this.changeCurrentcity(result.address_component.city);
				}
			});
		},
		methods: {
			...mapMutations(['changeAddress','changeCurrentcity']),
			handleClick() {
				console.log("hello world");
			},
			getData(msg) {
				console.log(msg);
			},
			topath() {
				uni.navigateTo({
					url: "../detail/detail?id=12580",
				});
			},
			gotoSearch(){
				uni.navigateTo({
				  url:"../search/search",
				});
			},
			gotoChoose_addr(){
				uni.navigateTo({
					url:'../chooseaddress/chooseaddress'
				})
			}
		},
		components: {
			test,
			shopitem,
			uniIcons,
		},
		computed:{
			...mapState(['address','currentCity'])
		},
		onReachBottom() {
			console.log("到达底部了");
		}
	}
</script>

<style lang="scss">
	$themeColor:#008eff;
	page{
		background-color: #eee;
	}
	.location{
		// height: 100rpx;
		width: 100%;
		background: $themeColor;
		color: #fff;
		font-weight: 650;
		padding: 30rpx 30rpx;
		// position: fixed;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	
	.search{
		width: 100%;
		padding: 20rpx 30rpx;
		background: $themeColor;
		box-sizing: border-box;
		.search-content{
			background: #fff;
			height: 75rpx;
			border-radius: 50rpx;
			@include flexcenter();
			color: #999999;
		}
	}
	.food-types{
		margin-top: 20rpx;
		padding-bottom: 30rpx;
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		.type-items{
			width: 25%;
			margin-top: 10rpx;
			image{
				width:84rpx ;
				height: 84rpx;
			}
			view{
				@include flexcenter();
			}
		}
	}
	.shop-list{
		margin-top: 20rpx;
		background: #fff;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
